<template>
  <div class="coupon-data">
    <el-card>
      <div class="page-header">
        <h2>优惠券数据看板</h2>
        <div class="header-actions">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px; margin-right: 12px;"
            @change="handleDateChange"
          />
          <el-button type="primary" @click="refreshData">刷新数据</el-button>
        </div>
      </div>

      <!-- 核心指标卡片 -->
      <div class="metrics-cards">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon issued-icon">
                  <el-icon><Promotion /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-value">{{ totalIssued }}</div>
                  <div class="metric-label">发放数量</div>
                  <div class="metric-trend">
                    <span :class="issuedTrend >= 0 ? 'trend-up' : 'trend-down'">
                      {{ issuedTrend >= 0 ? '+' : '' }}{{ issuedTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon used-icon">
                  <el-icon><Check /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-value">{{ totalUsed }}</div>
                  <div class="metric-label">使用数量</div>
                  <div class="metric-trend">
                    <span :class="usedTrend >= 0 ? 'trend-up' : 'trend-down'">
                      {{ usedTrend >= 0 ? '+' : '' }}{{ usedTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon rate-icon">
                  <el-icon><DataLine /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-value">{{ useRate }}%</div>
                  <div class="metric-label">使用率</div>
                  <div class="metric-trend">
                    <span :class="rateTrend >= 0 ? 'trend-up' : 'trend-down'">
                      {{ rateTrend >= 0 ? '+' : '' }}{{ rateTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon revenue-icon">
                  <el-icon><Money /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-value">{{ totalRevenue }}</div>
                  <div class="metric-label">带动销售额</div>
                  <div class="metric-trend">
                    <span :class="revenueTrend >= 0 ? 'trend-up' : 'trend-down'">
                      {{ revenueTrend >= 0 ? '+' : '' }}{{ revenueTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon deduct-icon">
                  <el-icon><Money /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-value">{{ currency(totalDeduct) }}</div>
                  <div class="metric-label">优惠券抵扣金额</div>
                  <div class="metric-trend">
                    <span :class="deductTrend >= 0 ? 'trend-up' : 'trend-down'">
                      {{ deductTrend >= 0 ? '+' : '' }}{{ deductTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <el-row :gutter="20">
          <!-- 优惠券发放与使用趋势 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>优惠券发放与使用趋势</span>
                  <el-radio-group v-model="trendPeriod" size="small">
                    <el-radio-button label="7d">7天</el-radio-button>
                    <el-radio-button label="30d">30天</el-radio-button>
                    <el-radio-button label="90d">90天</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="chart-container" ref="trendChartRef"></div>
            </el-card>
          </el-col>

          <!-- 优惠券类型分布 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>优惠券类型分布</span>
                </div>
              </template>
              <div class="chart-container" ref="typeChartRef"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <!-- 优惠券使用率热力图 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>优惠券使用率热力图</span>
                </div>
              </template>
              <div class="chart-container" ref="heatmapChartRef"></div>
            </el-card>
          </el-col>

          <!-- 面值分布分析 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>面值分布分析</span>
                </div>
              </template>
              <div class="chart-container" ref="amountChartRef"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <!-- 用户类型使用分析 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户类型使用分析</span>
                </div>
              </template>
              <div class="chart-container" ref="userTypeChartRef"></div>
            </el-card>
          </el-col>

          <!-- ROI分析 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>ROI分析</span>
                </div>
              </template>
              <div class="chart-container" ref="roiChartRef"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 明细与分析区块 -->
      <div class="analysis-section">
        <el-row :gutter="20">
          <!-- 优惠券明细表 -->
          <el-col :span="24">
            <el-card class="analysis-card">
              <template #header>
                <div class="card-header">
                  <span>优惠券明细表</span>
                  <el-button size="small" @click="exportTable">导出Excel</el-button>
                </div>
              </template>
              <el-table :data="couponTableData" style="width:100%;margin-bottom:12px;">
                <el-table-column prop="name" label="券名称" min-width="120" />
                <el-table-column prop="type" label="类型" width="80" />
                <el-table-column prop="faceValue" label="面值" width="80" />
                <el-table-column prop="issued" label="发放数" width="80" />
                <el-table-column prop="used" label="使用数" width="80" />
                <el-table-column prop="useRate" label="使用率" width="80" />
                <el-table-column prop="deduct" label="抵扣金额" width="100" />
                <el-table-column prop="revenue" label="带动销售额" width="120" />
                <el-table-column prop="expired" label="过期数" width="80" />
                <el-table-column prop="invalid" label="作废数" width="80" />
              </el-table>
              <el-pagination
                v-model:current-page="tablePage.current"
                v-model:page-size="tablePage.size"
                :total="couponTableData.length"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 50]"
                style="margin-top:8px; text-align:right;" />
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <!-- 用户分析 -->
          <el-col :span="12">
            <el-card class="analysis-card">
              <template #header><span>用户分析</span></template>
              <div class="chart-container" ref="userChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
          <!-- 渠道分析 -->
          <el-col :span="12">
            <el-card class="analysis-card">
              <template #header><span>核销渠道分析</span></template>
              <div class="chart-container" ref="channelChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <!-- 活动分析 -->
          <el-col :span="12">
            <el-card class="analysis-card">
              <template #header><span>活动效果分析</span></template>
              <div class="chart-container" ref="activityChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
          <!-- 过期/作废分析 -->
          <el-col :span="12">
            <el-card class="analysis-card">
              <template #header><span>过期/作废券分析</span></template>
              <div class="chart-container" ref="expireChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <!-- 订单关联分析 -->
          <el-col :span="24">
            <el-card class="analysis-card">
              <template #header><span>订单关联分析</span></template>
              <div class="chart-container" ref="orderChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <!-- 时间对比分析 -->
          <el-col :span="24">
            <el-card class="analysis-card">
              <template #header><span>自定义时间周期对比</span></template>
              <div class="compare-bar">
                <el-date-picker v-model="compareRange1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:220px;margin-right:8px;" />
                <el-date-picker v-model="compareRange2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:220px;" />
                <el-button type="primary" size="small" @click="compareData">对比</el-button>
              </div>
              <div class="chart-container" ref="compareChartRef" style="height:260px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Promotion, Check, DataLine, Money } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 日期范围
const dateRange = ref([])

// 核心指标数据
const totalIssued = ref(15680)
const issuedTrend = ref(15.2)
const totalUsed = ref(12450)
const usedTrend = ref(12.8)
const useRate = ref(79.4)
const rateTrend = ref(-1.5)
const totalRevenue = ref(1256800)
const revenueTrend = ref(18.7)

// 优惠券抵扣金额数据
const totalDeduct = ref(85600)
const deductTrend = ref(9.3)

// 金额格式化过滤器
function currency(val: number) {
  if (typeof val !== 'number') return val
  return '¥' + val.toLocaleString()
}

// 图表周期
const trendPeriod = ref('30d')

// 图表引用
const trendChartRef = ref()
const typeChartRef = ref()
const heatmapChartRef = ref()
const amountChartRef = ref()
const userTypeChartRef = ref()
const roiChartRef = ref()

// 图表实例
let trendChart: echarts.ECharts
let typeChart: echarts.ECharts
let heatmapChart: echarts.ECharts
let amountChart: echarts.ECharts
let userTypeChart: echarts.ECharts
let roiChart: echarts.ECharts

// 初始化优惠券发放与使用趋势图
function initTrendChart() {
  if (!trendChartRef.value) return
  
  trendChart = echarts.init(trendChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['发放数量', '使用数量', '使用率']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      {
        type: 'value',
        name: '数量',
        position: 'left'
      },
      {
        type: 'value',
        name: '使用率(%)',
        position: 'right',
        max: 100
      }
    ],
    series: [
      {
        name: '发放数量',
        type: 'bar',
        data: [1200, 1500, 1800, 2200, 2500, 2800, 3200],
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '使用数量',
        type: 'bar',
        data: [800, 1200, 1500, 1800, 2000, 2200, 2500],
        itemStyle: { color: '#67C23A' }
      },
      {
        name: '使用率',
        type: 'line',
        yAxisIndex: 1,
        data: [66.7, 80.0, 83.3, 81.8, 80.0, 78.6, 78.1],
        itemStyle: { color: '#E6A23C' }
      }
    ]
  }
  
  trendChart.setOption(option)
}

// 初始化优惠券类型分布图
function initTypeChart() {
  if (!typeChartRef.value) return
  
  typeChart = echarts.init(typeChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '优惠券类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 40, name: '满减券', itemStyle: { color: '#409EFF' } },
          { value: 25, name: '折扣券', itemStyle: { color: '#67C23A' } },
          { value: 20, name: '包邮券', itemStyle: { color: '#E6A23C' } },
          { value: 15, name: '无门槛券', itemStyle: { color: '#F56C6C' } }
        ]
      }
    ]
  }
  
  typeChart.setOption(option)
}

// 初始化优惠券使用率热力图
function initHeatmapChart() {
  if (!heatmapChartRef.value) return
  
  heatmapChart = echarts.init(heatmapChartRef.value)
  
  const option = {
    tooltip: {
      position: 'top'
    },
    grid: {
      height: '50%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['满减券', '折扣券', '包邮券', '无门槛券'],
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: ['B端用户', 'C端用户', 'VIP用户', '普通用户'],
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffcc', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      }
    },
    series: [{
      name: '使用率',
      type: 'heatmap',
      data: [
        [0, 0, 85], [1, 0, 78], [2, 0, 92], [3, 0, 65],
        [0, 1, 72], [1, 1, 88], [2, 1, 76], [3, 1, 82],
        [0, 2, 95], [1, 2, 91], [2, 2, 89], [3, 2, 87],
        [0, 3, 68], [1, 3, 75], [2, 3, 71], [3, 3, 79]
      ],
      label: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  heatmapChart.setOption(option)
}

// 初始化面值分布分析图
function initAmountChart() {
  if (!amountChartRef.value) return
  
  amountChart = echarts.init(amountChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['发放数量', '使用数量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['0-50', '51-100', '101-200', '201-500', '500+']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '发放数量',
        type: 'bar',
        data: [3200, 4500, 3800, 2800, 1800],
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '使用数量',
        type: 'bar',
        data: [2500, 3600, 3000, 2200, 1350],
        itemStyle: { color: '#67C23A' }
      }
    ]
  }
  
  amountChart.setOption(option)
}

// 初始化用户类型使用分析图
function initUserTypeChart() {
  if (!userTypeChartRef.value) return
  
  userTypeChart = echarts.init(userTypeChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['B端用户', 'C端用户', 'VIP用户', '普通用户']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['满减券', '折扣券', '包邮券', '无门槛券']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'B端用户',
        type: 'bar',
        stack: 'total',
        data: [320, 280, 250, 180],
        itemStyle: { color: '#409EFF' }
      },
      {
        name: 'C端用户',
        type: 'bar',
        stack: 'total',
        data: [280, 320, 220, 200],
        itemStyle: { color: '#67C23A' }
      },
      {
        name: 'VIP用户',
        type: 'bar',
        stack: 'total',
        data: [200, 250, 180, 150],
        itemStyle: { color: '#E6A23C' }
      },
      {
        name: '普通用户',
        type: 'bar',
        stack: 'total',
        data: [150, 200, 120, 100],
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }
  
  userTypeChart.setOption(option)
}

// 初始化ROI分析图
function initRoiChart() {
  if (!roiChartRef.value) return
  
  roiChart = echarts.init(roiChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['优惠券成本', '带动销售额', 'ROI']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['满减券', '折扣券', '包邮券', '无门槛券']
    },
    yAxis: [
      {
        type: 'value',
        name: '金额(万元)',
        position: 'left'
      },
      {
        type: 'value',
        name: 'ROI倍数',
        position: 'right'
      }
    ],
    series: [
      {
        name: '优惠券成本',
        type: 'bar',
        data: [25, 18, 15, 12],
        itemStyle: { color: '#F56C6C' }
      },
      {
        name: '带动销售额',
        type: 'bar',
        data: [180, 150, 120, 85],
        itemStyle: { color: '#67C23A' }
      },
      {
        name: 'ROI',
        type: 'line',
        yAxisIndex: 1,
        data: [7.2, 8.3, 8.0, 7.1],
        itemStyle: { color: '#E6A23C' }
      }
    ]
  }
  
  roiChart.setOption(option)
}

// 处理日期变化
function handleDateChange() {
  refreshData()
}

// 刷新数据
function refreshData() {
  ElMessage.success('数据已刷新')
  // 这里可以调用API重新获取数据
}

// 监听窗口大小变化
function handleResize() {
  trendChart?.resize()
  typeChart?.resize()
  heatmapChart?.resize()
  amountChart?.resize()
  userTypeChart?.resize()
  roiChart?.resize()
}

// 明细表mock
const couponTableData = ref([
  { name: '新人券', type: '满减', faceValue: 10, issued: 5000, used: 4200, useRate: '84%', deduct: 32000, revenue: 120000, expired: 600, invalid: 200 },
  { name: '满100减20', type: '满减', faceValue: 20, issued: 3000, used: 2100, useRate: '70%', deduct: 25000, revenue: 90000, expired: 700, invalid: 200 },
  { name: '无门槛券', type: '直减', faceValue: 5, issued: 4000, used: 3200, useRate: '80%', deduct: 16000, revenue: 60000, expired: 600, invalid: 200 },
  { name: '会员专享券', type: '满减', faceValue: 30, issued: 2000, used: 1200, useRate: '60%', deduct: 18000, revenue: 70000, expired: 600, invalid: 200 }
])
const tablePage = ref({ current: 1, size: 10 })
function exportTable() {
  ElMessage.success('导出成功（mock）')
}
// 用户分析、渠道分析、活动分析、过期券分析、订单分析、对比分析图表ref
const userChartRef = ref(), channelChartRef = ref(), activityChartRef = ref(), expireChartRef = ref(), orderChartRef = ref(), compareChartRef = ref()
const compareRange1 = ref([]), compareRange2 = ref([])
function compareData() {
  ElMessage.success('对比分析已生成（mock）')
}
// 图表初始化（mock数据）
onMounted(() => {
  nextTick(() => {
    initTrendChart()
    initTypeChart()
    initHeatmapChart()
    initAmountChart()
    initUserTypeChart()
    initRoiChart()
    
    window.addEventListener('resize', handleResize)
  })
  // 这里只做简单的echarts初始化，实际可根据业务补充数据
  if (userChartRef.value) {
    const chart = echarts.init(userChartRef.value)
    chart.setOption({
      title: { text: '新老用户占比', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [{ type: 'pie', radius: '60%', data: [ { value: 3200, name: '新用户' }, { value: 6800, name: '老用户' } ] }]
    })
  }
  if (channelChartRef.value) {
    const chart = echarts.init(channelChartRef.value)
    chart.setOption({
      title: { text: '核销渠道', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [{ type: 'pie', radius: '60%', data: [ { value: 4000, name: 'PC' }, { value: 5000, name: 'H5' }, { value: 1200, name: '小程序' }, { value: 800, name: 'APP' } ] }]
    })
  }
  if (activityChartRef.value) {
    const chart = echarts.init(activityChartRef.value)
    chart.setOption({
      title: { text: '活动效果', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [{ type: 'pie', radius: '60%', data: [ { value: 3000, name: '618大促' }, { value: 2000, name: '会员日' }, { value: 1200, name: '新客专享' } ] }]
    })
  }
  if (expireChartRef.value) {
    const chart = echarts.init(expireChartRef.value)
    chart.setOption({
      title: { text: '过期/作废券', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [{ type: 'pie', radius: '60%', data: [ { value: 2500, name: '过期' }, { value: 800, name: '作废' } ] }]
    })
  }
  if (orderChartRef.value) {
    const chart = echarts.init(orderChartRef.value)
    chart.setOption({
      title: { text: '订单关联分析', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { bottom: 0, data: ['订单数', '抵扣金额'] },
      xAxis: { type: 'category', data: ['1-10', '11-20', '21-30', '31-40', '41-50'] },
      yAxis: { type: 'value' },
      series: [
        { name: '订单数', type: 'bar', data: [120, 132, 101, 134, 90] },
        { name: '抵扣金额', type: 'line', data: [5000, 6000, 5500, 7000, 6500] }
      ]
    })
  }
  if (compareChartRef.value) {
    const chart = echarts.init(compareChartRef.value)
    chart.setOption({
      title: { text: '自定义时间对比', left: 'center', top: 10, textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { bottom: 0, data: ['周期1', '周期2'] },
      xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7'] },
      yAxis: { type: 'value' },
      series: [
        { name: '周期1', type: 'line', data: [1000, 1200, 1100, 1300, 1250, 1400, 1350] },
        { name: '周期2', type: 'line', data: [900, 1100, 1050, 1200, 1150, 1300, 1250] }
      ]
    })
  }
})
</script>

<style scoped>
.coupon-data {
  padding: 16px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
}

.metrics-cards {
  margin-bottom: 24px;
}

.metric-card {
  height: 120px;
}

.metric-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.issued-icon {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
}

.used-icon {
  background: linear-gradient(135deg, #67C23A, #85CE61);
}

.rate-icon {
  background: linear-gradient(135deg, #E6A23C, #EEBE77);
}

.revenue-icon {
  background: linear-gradient(135deg, #F56C6C, #F78989);
}

.deduct-icon {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  color: #fff;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.metric-trend {
  font-size: 12px;
  color: #909399;
}

.trend-up {
  color: #67C23A;
  font-weight: bold;
}

.trend-down {
  color: #F56C6C;
  font-weight: bold;
}

.charts-section {
  margin-top: 24px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.analysis-section {
  margin-top: 24px;
}

.analysis-card {
  margin-bottom: 20px;
}

.compare-bar {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
</style> 